$(() => {
  // 1.0 获取文章类别
  getList()
  function getList() {
    $.ajax({
      type: 'get',
      url: '/admin/category/list',
      success: (res) => {
        console.log(res)
        // 3.0 调用模板
        const htmlStr = template('cate_item', res)
        // console.log(htmlStr)
        // 4.0 把模板渲染(替换)到页面中
        $('tbody').html(htmlStr)
      },
    })
  }

  // 2.0 点击按钮弹出新增类别的模态框
  $('#xinzengfenlei').on('click', () => {
    // 2.1 通过 JavaScript 调用模态框
    $('#myModal').modal()
  })

  // 🎃2.1 点击新增分类模态框的提交按钮 - 🎃注意书写位置
  $('.btn_opt').on('click', (e) => {
    // 2.1.1 阻止默认行为
    e.preventDefault()
    // 2.1.2 获取表单内容
    const name = $('[name="name"]').val().trim()
    const slug = $('[name="slug"]').val().trim()
    console.log({ name, slug })
    // 2.1.3 发送 ajax 请求
    $.ajax({
      type: 'post',
      url: '/admin/category/add',
      data: { name, slug },
      success: (res) => {
        console.log(res)
        // 2.1.4 添加成功
        if (res.code === 200) {
          // 隐藏模态框
          $('#myModal').modal('hide')
          // 重新调用获取列表的函数
          getList()
          // 清空表单的数据
          $('[name="name"]').val('')
          $('[name="slug"]').val('')
        } else {
          // 2.1.5 添加失败，layer.msg() 请提示
          layer.msg(res.msg)
        }
      },
    })
  })

  // 3.0 给编辑按钮绑定事件 - 事件委托
  $('tbody').on('click', '.btn_edit', function () {
    // console.log(1111)
    // 3.0.1 显示编辑模态框
    $('#editModal').modal()
    // 3.0.2 获取到当前编辑按钮对应行的数据
    const name = $(this).parents('tr').find('td').eq(0).text()
    const slug = $(this).parents('tr').find('td').eq(1).text()
    // console.log({ name, slug })
    // 3.0.3 显示到模态框表单中
    $('#name').val(name)
    $('#slug').val(slug)
    // 3.0.4 把 id 保存到提交按钮上
    $('.btn_opt_edit').attr('data-id', $(this).attr('data-id'))
  })

  // 🎃3.1 编辑模态框表单提交 - Ajax请求 - 🎃注意书写位置
  $('.btn_opt_edit').on('click', function (e) {
    // 3.1.1 阻止默认表单提交行为
    e.preventDefault()
    // 3.1.2 准备接口文档所需的3个参数 🧨
    const id = $(this).attr('data-id')
    const name = $('#name').val().trim()
    const slug = $('#slug').val().trim()
    // console.log({ id, name, slug })
    // 3.1.3 发送ajax请求编辑
    $.ajax({
      type: 'post',
      url: '/admin/category/edit',
      data: { id, name, slug },
      success: (res) => {
        // console.log(res)
        // 3.1.4 统一提示后端返回的提示信息
        layer.msg(res.msg)
        // 3.1.5 编辑成功
        if (res.code === 200) {
          // 隐藏模态框
          $('#editModal').modal('hide')
          // 重新获取列表数据
          getList()
        }
      },
    })
  })

  // 4.0 删除按钮点击 - 事件委托
  $('tbody').on('click', '.btn_del', function () {
    // 4.0.1 获取按钮上的自定义 id
    const id = $(this).attr('data-id')
    // console.log(id)
    // 4.0.2 弹出层 - 询问框
    layer.confirm('是否确定删除？', function (index) {
      // 4.0.3 当用户点击确定后才执行回调函数的删除请求
      $.ajax({
        type: 'post',
        url: '/admin/category/delete',
        data: { id },
        success: (res) => {
          console.log(res)
          // 轻提示
          layer.msg(res.msg)
          // 删除成功,重新获取类别数据
          getList()
        },
      })
      // 4.0.4 根据回调函数的 index 关闭当前弹出层
      layer.close(index)
    })
  })
})
